<template>
    <div class="p-4 bg-white rounded-lg space-y-3 text-gray-600 text-sm">
        <div class="flex items-center justify-between">
            <div>发票</div>
            <div class="flex items-center" @click="showPopup(invoiceRef)">
                <div>普票(商品明细-个人)</div>
                <div>
                    <IMingcute:rightFill />
                </div>
            </div>
        </div>
        <div class="flex items-center justify-between">
            <div>支付方式</div>
            <div class="flex items-center" @click="showPopup(payModeRef)">
                <div>在线支付 + 活到付款</div>
                <div>
                    <IMingcute:rightFill />
                </div>
            </div>
        </div>
        <Popup ref="invoiceRef">
            <div class="bg-white rounded-t-lg h-5/6 p-4 flex flex-col">
                <div class="shrink-0 flex items-center justify-between">
                    <div class="text-lg">发票</div>
                    <div class="flex items-center space-x-2 text-gray-700 text-xs">
                        <div>发票须知</div>
                        <div class="bg-gray-100  rounded-full p-1" @click=" closePopup(invoiceRef)">
                            <IMdi:close />
                        </div>
                    </div>
                </div>
                <div class="grow overflow-y-auto divide-y mt-2 text-sm">
                    <div class="py-4">
                        <div>发票类型</div>
                        <div class="flex items-center space-x-2 mt-4">
                            <div class="bg-red-100 border border-red-500 text-red-500 rounded-full px-4">普通发票</div>
                        </div>
                        <div class="mt-2 text-xs text-gray-400">
                            发票说明发票说明发票说明发票说明发票说明发票说明
                        </div>
                    </div>
                    <div class="py-4">
                        <div>发票抬头</div>
                        <div class="flex items-center space-x-2 mt-4">
                            <div class=" border  rounded-full px-4" :class="{
                                'bg-red-100 border-red-500 text-red-500': item.key == type,
                                'bg-gray-100 border-gray-200 text-gray-500': item.key != type,
                            }" v-for="(item, index) in types" @click="type = item.key">
                                {{ item.name }}
                            </div>

                        </div>
                        <div class="mt-2 text-xs text-gray-400">
                            <div v-show="type == 'personal'">
                                <div class="flex items-center">
                                    <div class="mr-4 shrink-0 w-20">个人名称</div>
                                    <div class="grow">
                                        <input placeholder="请填写个人或您的姓名" class=" w-full h-8 outline-none" />
                                    </div>
                                </div>

                            </div>
                            <div v-show="type == 'company'">
                                <div class="flex items-center">
                                    <div class="mr-4 w-20 shrink-0">单位名称</div>
                                    <div class="grow">
                                        <input placeholder="请填写单位名称" class=" w-full h-8 outline-none" />
                                    </div>
                                </div>

                                <div class="flex items-center">
                                    <div class="mr-4 shrink-0 w-20">纳税人识别码</div>
                                    <div class="grow">
                                        <input placeholder="请在此填写纳税人识别号" class=" w-full h-8 outline-none" />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="bg-red-500 text-white text-center rounded-lg p-2" @click="closePopup(invoiceRef)">确定</div>
            </div>
        </Popup>
        <Popup ref="payModeRef">
            <div class="bg-white rounded-t-lg h-5/6 p-4 flex flex-col">
                <div class="shrink-0 flex items-center justify-between">
                    <div class="text-lg">支付方式</div>
                    <div class="bg-gray-100  rounded-full p-1" @click="closePopup(payModeRef)">
                        <IMdi:close />
                    </div>
                </div>
                <div class="grow overflow-y-auto  mt-2 text-sm space-y-8">
                    <div class=" " v-for="(item, index) in order.cart">
                        <div>
                            <div class="whitespace-nowrap  overflow-hidden space-x-2">
                                <div v-for="(goods, index) in [...item.goods, ...item.goods]"
                                    class="w-16 h-16 inline-block rounded-md overflow-hidden">
                                    <LazyImage :src="goods.thumb" />
                                </div>

                            </div>
                            <div class="flex items-center space-x-4 mt-2">
                                <div class=" border  rounded-full px-4" :class="{
                                    'bg-red-100 border-red-500 text-red-500': mode.key == item.payMode,
                                    'bg-gray-100 border-gray-200 text-gray-500': mode.key != item.payMode,
                                }" v-for="(mode, index) in modes" @click="item.payMode = mode.key">{{ mode.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-red-500 text-white text-center rounded-lg p-2" @click="closePopup(payModeRef)">确定</div>
            </div>
        </Popup>

    </div>
</template>
    
<script setup lang='ts'>
const invoiceRef = ref()
const payModeRef = ref()
const showPopup = (ref: any) => {
    ref?.open()
}
const closePopup = (ref: any) => {
    ref?.close()
}
const order = inject<any>('order');
const type = ref('personal')
const types = [
    {
        name: '个人',
        key: 'personal'
    },
    {
        name: '单位',
        key: 'company'
    }
]
const modes = [
    {
        name: '在线付款',
        key: 'online'
    },
    {
        name: '货到付款',
        key: 'offline'
    }
]
</script>
    
<style></style>